<template>
    <div class="miaosha" style="padding-top:35% ">
        <div class="miaosha_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">
          	  丫贝秒杀
        </div>
		 <div class="allSort mt mb f14">
                <div class="sortMenu clearfix content">
					<ul class="sortMenu-ul time">
						<li class="cell" v-for="item in timeList" style="height:60px" :class="{ed1c:item==choseed}" @click="choseed=item">
							<span class="f18" :class="{'c999':(item-0)<timeList[0],'text-decoration':(item-0)<timeList[0],'ed1c':item==choseed}">{{item}}:00</span>
							<span class="f12" style="line-height:18px;" v-if="item==timeList[0]">抢购中</span>
							<span class="f12" style="line-height:18px;" v-else-if="(item-0)>timeList[0]">即将开始</span>
							<span class="f12 c999" style="line-height:18px" :class="{'ed1c':item==choseed}">抢购结束</span>
						</li>
					</ul>
                </div>
         </div>
        <div class="tip">
        	<!-- <span class="fr">
        		<span>距结束</span>
        		<span class="time-detail">
        			<span class="shape">10</span>&nbsp;:&nbsp;
        			<span  class="shape">59</span>&nbsp;:&nbsp;
        			<span class="shape">58</span>
        		</span>
        	</span> -->
        	<span>抢购中，先下单先得哦</span>
        </div>
        <div class="goods-lists">
        	<ul>
        		<li class="goods-item" v-for="item in getGoods(choseed)" >
        			<img :src="'http:'+item.thumb"/>
        			<div class="content">
        				<div class="goods-desc f14 mb15">
        					<span style="color: rgb(237, 28, 28);" v-if="item.site=='tmall'">【天猫】</span>
                            <span style="color: rgb(237, 28, 28);" v-else>【淘宝】</span>
                            {{item.title}}
        				</div>
        				<div class="current-price">
        					<span class="fl ed1c f16">￥{{item.price}}</span>
        					<button class="fr btn" v-if="choseed==timeList[0]" @click="goDetail(item.new_url) ">立即抢购</button>
							<button class="fr btn" v-else-if="choseed>timeList[0]" style="background:#edc414;">即将开始</button>
							<button class="fr btn" v-else style="background:#999;">抢购结束</button>
        				</div>
        				<div class="origin-price">
        					<span class="fr">销量{{item.final_sales}}<span></span></span>
        					<span class="text-decoration">￥{{Math.floor(item.price*1.5+2)}}</span>
        					
        				</div>
        			</div>
        		</li>
        	</ul>
        </div>
    </div>
</template>

<style>
    @import url("./miaosha.css");
</style>
<script>
    import API from '../../assets/js/API'
    export default {
        data() {
            return {
				backUrl:this.$route.query.backUrl,
				timeList:['00','08','10','12','14','16','18','20','22'],
				date:{
					hour:'',
					minute:'',
					second:'',
					products:[],
					goodsLists:[],
				},
				choseed:'',

            }
        },
        created() {
           //console.log($('.login').style.width)
			this.getDate();
            this.miaoShaGoods()
             window.scrollTo(0,0);
        },
        mounted() {
          $('.miaosha').css('height',$(window).height()+'px')
		},
		computed:{
			 getSession(){ 
				 let vm=this;
				let length=vm.timeList.length
				let new_date=''
				do{
					if(vm.date.hour<8){
						break;
					}else{
						new_date=vm.timeList.shift()
					    vm.timeList.push(new_date)
					}
				}while((vm.date.hour-vm.timeList[0])>2)
				vm.choseed=vm.timeList[0]
					 console.log( vm.timeList)
               
            },
		},
        methods: {
			  getGoods(hour){
                   window.scrollTo(0,0);
                 if((hour-0)>=8){
                    let index=Math.floor(hour/2-3)
                    return this.date.goodsLists[index]
                 }else{
                     return this.date.goodsLists[0]
                 }
			},
			 goDetail(new_url) {
                 var w=plus.webview.create( new_url,'taobao');
                      w.show();
                //    plus.runtime.openURL(new_url,function(){
                //         plus.runtime.openURL(new_url);
                //    },'com.taobao.taobao');
            },
			 miaoShaGoods(){
                let url=API.taotejia+'/rank';
                let form=new FormData()
                  this.$http.post(url,form,
                  {
                       headers: {'Content-Type': 'application/x-www-form-urlencoded,multipart/form-data'}
                  }
                  ).then(
                (res) => {
                    if (res.body.code==1) {
                         this.date.products= res.body.data.result;
                             let all=this.timeList.length;
                            let num=Math.floor(res.body.data.result.length/ all)
                            for(let i=0;i<all;i++){
                                this.date.products=[];
                                let start=i*num;
                                let end=start+num
                                for(let j=start;j<end;j++){
                                    this.date.products.push(res.body.data.result[j])
                                 } 
                                 this.date.goodsLists.push(this.shuffle(this.date.products))
                            }
                           
                        
                    } else {
                        Layer.showMsg("获取列表失败！");
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
            },
             shuffle(a) {
                var b = [];
                while (a.length > 0) {
                    var index = parseInt(Math.random() * (a.length - 1));
                    b.push(a[index]);
                    a.splice(index, 1);
                }
                return b;
            },
            goBack() {
                this.$router.goBack()
			},
			  getDate(){
				let vm=this;
                setInterval(function(){
                    let new_Date=new Date();
                     vm.date.hour=new_Date.getHours();
                      vm.date.minute=new_Date.getMinutes();
					 vm.date.second=new_Date.getSeconds();
					 vm.getSession;
                    //  if(vm.date.minute<10){
                    //      vm.date.minute='0'+vm.date.minute
                    //  }
                    //  if( vm.date.second<10){
                    //       vm.date.second='0'+ vm.date.second
                    //  }
                    //  if(vm.date.hour<10){
                    //      vm.date.hour='0'+ vm.date.hour
                    //  }
                },1000)
              
            },
        }
    }
</script>
